<template>
	<view class="income">
		<Header></Header>
		<view class="income-box">
			<u-sticky  :style="{top:isMobile?'44px':'68px',zIndex:1,background:'#fff'}">
				<view class="income-msg">
					<view class="income-msg-top flex-between-nowrap">
						<view class="income-msg-top-user flex-start-nowrap alic">
							<u-avatar :src="loginInfo.avatar || '/static/images/login/avatar.png'" mode="aspectFill" :size="isMobile?48:60" ></u-avatar>
							<text class="pl12 fwb fz24">{{loginInfo.nick_name && loginInfo.nick_name.substring(0,10)}}</text>
						</view>
						<view class="income-msg-top-money flex-between-nowrap flexdc alic">
							<text class="fz12 c666">当前芝草（100芝=1元）</text>
							<text class="c17 fz24 fwb">{{balance.balance || 0}}芝草</text>
						</view>
					</view>
					
					<view class="income-msg-bottom flex-around-nowrap">
						<view class="income-msg-bottom-histroy  flex-between-nowrap flexdc alic">
							<text class="fz12 c666">历史累计获得芝草</text>
							<text class="num fwb">{{balance.history_in_amount|| 0}}</text>
						</view>
						<view class="income-msg-bottom-month  flex-between-nowrap flexdc alic">
							<text class="fz12 c666">本月已兑换芝草</text>
							<text class="num fwb">{{balance.month_cash_out_balance}}{{balance.month_cash_out_balance_desc}}</text>
						</view>
						<view class="income-msg-bottom-add  flex-between-nowrap flexdc alic">
							<text class="fz12 c666">历史累计支出芝草</text>
							<text class="num fwb">{{balance.history_out_amount}}</text>
						</view>
					</view>
				</view>
			</u-sticky>
			<view class="income-main">
				<u-sticky  :style="{top:isMobile?'175px':'263px',zIndex:1}">
					<view class="income-tab">
						 <u-tabs :list="tabList.list"
						  :current="tabList.index"
						  :itemStyle="{
							  height:'62px',
							  fontSize:'16px',
							  width:'100%',
							 
						  }"
						  :activeStyle="{
							  background: tabList.activeColor,
							  fontWeight: 'bold',
							  width: '100%',
							  height: '100%',
							  textAlign:'center',
							  lineHeight: '62px',
						  }"
						  @click="changeTab"></u-tabs>
					</view>
				</u-sticky>
				 <!-- exclude="MyRight" -->
				 <keep-alive>
					 <component @setScroll="setScroll"  @setScrollTop="setScrollTop" @init="init" :ref="compoment[tabList.index]" :is="compoment[tabList.index]"></component>
				  </keep-alive>
				<!-- <keep-alive>
					<exchange v-if="tabList.index == 0"></exchange>
					<incomeList v-if="tabList.index == 1"></incomeList>
				</keep-alive> -->
			</view>
			
		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	import exchange from './detail/exchange.vue'
	import incomeList from './detail/incomeList.vue'
	import record from './detail/record.vue'
	import ranking from './detail/ranking.vue'
	import Header from "@/components/Header/Header.vue"
	import Footer from "@/components/Footer/Footer.vue"
	export default {
		components: {
			Header,Footer,exchange,incomeList,record,ranking
		},
		data() {
			return {
				compoment:['exchange','incomeList','record','ranking',],
				tabList:{
					index:-1,
					activeColor:'#F3FBFF',
					
					list:[
						{
							name:'兑换',
						},{
							name:'收入记录',
							badge: {
								isDot: false
							}
						},{
							name:'兑换记录',
							badge: {
								isDot: false
							}
						},{
							name:'收入排行榜',
						},
					]
				},
				balance:{},//芝草
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			uni.setStorageSync('scroll_top',this.scrollTop);
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'我的收入' +'-宅小职'
			})
			this.tabList.index = uni.getStorageSync('incomeIndex') || 0
			let sys = uni.getSystemInfoSync()
			if(sys.screenWidth < 1024){
				this.tabList.activeColor = ''
			}
			this.init()
			
		},
		watch:{
			getUserUnReadMsg(val){
				if(val){
					let item1 = this.tabList.list[1]
					item1.badge.isDot = val.income_record;
					this.tabList.list.splice(1,1,item1)
					
					let item2 = this.tabList.list[2]
					item2.badge.isDot = val.review_record;
					this.tabList.list.splice(2,1,item2)
				}
			}
		},
		methods:{
			setScrollTop(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:0
				})
			},
			setScroll(flag){
				if(flag){
					uni.setStorageSync('scroll_top',this.scrollTop);  //保存滚动位置
				}else{
					console.log(uni.getStorageSync("scroll_top"))
					uni.pageScrollTo({
						scrollTop:uni.getStorageSync("scroll_top"),
						duration:0
					})
				}
				
				
			},
			changeTab(e){
				this.tabList.index = e.index
				uni.setStorageSync('incomeIndex',e.index)
				this.setUnredMsg()
				this.$nextTick(()=>{
					if(this.$refs.exchange && this.$refs.exchange.detail.show){
						this.$refs.exchange.detail.show = false
					}
					
				})
				
			},
			init(){
				this.$api.balanceStatistics().then(res => {
					if(res.code == 200){
						this.balance = res.data;
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.pl12{
		padding-left: 12px;
	}
	.income{
		&-box{
			width: 976px;
			margin: 0px auto;
			padding-top: 40px;
		}
		&-msg{
			box-shadow: 0px 0px 9px 0px rgba(74,74,74,0.11);
			padding: 0 25px;
			box-sizing: border-box;
			margin-bottom:20px;
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			&-top{
				padding: 24px 10px 20px 10px;
				border-bottom: 1px solid #d6d7d9;
				&-money{
					padding: 4px 0;
					
				}
				.fz24{
					font-size: 24px;
				}
			}
			&-bottom{
				padding: 30px 0;
				.num{
					font-size: 24px;
					margin-top: 19rpx;
				}
			}
		}
		&-main{
			box-shadow: 0px 0px 9px 0px rgba(74,74,74,0.11);
			margin-bottom: 60rpx;
			min-height: 600px;
		}
		&-tab{
			border-bottom: 1px solid #d6d7d9;
			background: #fff;
			/deep/.u-tabs__wrapper__nav__line{
				bottom: 0;
			}
			/deep/.u-tabs__wrapper__nav__item{
				padding: 0;
				cursor: pointer;
				position: relative;
			}
			/deep/.u-badge{
				position: absolute;
				right: 30%;
				top: 30%;
			}
		}
	}
	@media screen and (min-width: 0px) and (max-width:1024px){
		.income{
			&-box{
				width: 100%;
				padding-top: 0;
			}
			&-main{
				box-shadow:none;
				min-height: 600rpx;
			}
			&-msg{
				// width: calc(100% - 100px);
				margin:15px;
				padding-left: 0 ;
				padding-right: 0;
				box-shadow: 0px 0px 10px 0px rgba(74,74,74,0.2);
				&-top{
					padding: 20rpx 20rpx;
					padding-right: 0;
					.fz24{
						font-size: 14px;
					}
				}
				&-bottom{
					padding: 20rpx 0;
					.num{
						font-size: 14px;
						
					}
				}
			}
			&-tab{
				/deep/.u-badge{
					position: absolute;
					right: 0;
				}
			}
			
		}
	}
	
</style>
